<template>
	<div class="nav">
		<div class="nav-item flex-center-center">
			<div class="nav-item-body"
					@click="navClick(firstNav,$event)">
				<van-image width="40"
									:src="firstNav.selectIcon" />
				<div class="item-text">{{firstNav.title}}</div>
			</div>
		</div>
		<div class="nav-item flex-center-center nav-item-action"
				v-for="item in navList"
				:key="item">
			<div class="nav-item-body"
					@click="navClick(item,$event)">
				<van-image width="40"
									:src="item.selectIcon" />
				<div class="item-text">{{item.title}}</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: "NavRouter",
	data () {
		return {
			firstNav: {
				title: "首页",
				selectIcon: require('@/assets/shouye.png'),
				routerPath: "/",
			},
			navList: [{
				title: "取苗",
				selectIcon: require('@/assets/qumiao.png'),
				routerPath: "/Qumiao",
				children: [{
					title: "种类取苗",
					selectIcon: require('@/assets/zlqm.png'),
					routerPath: "/ZhongleiQumiao"
				}, {
					title: "最近取苗",
					selectIcon: require('@/assets/zjqm.png'),
					routerPath: "/ZuijinQumiao"
				}, {
					title: "常用取苗",
					selectIcon: require('@/assets/cyqm.png'),
					routerPath: "/ChangyongQumiao"
				}, {
					title: "取苗日志",
					selectIcon: require('@/assets/qmrz.png'),
					routerPath: "/QumiaoRizhi"
				}]
			}, {
				title: "库存",
				selectIcon: require('@/assets/kucun.png'),
				routerPath: "/Kucun",
				children: [{
					title: "种类取苗",
					selectIcon: require('@/assets/zlqm.png'),
					routerPath: "/ZhongleiQumiao"
				}, {
					title: "最近取苗",
					selectIcon: require('@/assets/zjqm.png'),
					routerPath: "/ZuijinQumiao"
				}]
			}, {
				title: "操作",
				selectIcon: require('@/assets/caozuo.png'),
				routerPath: "/Caozuo",
				children: [{
					title: "种类取苗",
					selectIcon: require('@/assets/zlqm.png'),
					routerPath: "/ZhongleiQumiao"
				}, {
					title: "最近取苗",
					selectIcon: require('@/assets/zjqm.png'),
					routerPath: "/ZuijinQumiao"
				}, {
					title: "最近取苗",
					selectIcon: require('@/assets/zjqm.png'),
					routerPath: "/ZuijinQumiao"
				}]
			}, {
				title: "系统",
				selectIcon: require('@/assets/xitong.png'),
				routerPath: "/Xitong",
				children: [{
					title: "种类取苗",
					selectIcon: require('@/assets/zlqm.png'),
					routerPath: "/ZhongleiQumiao"
				}, {
					title: "最近取苗",
					selectIcon: require('@/assets/zjqm.png'),
					routerPath: "/ZuijinQumiao"
				}]
			}]
		};
	},
  watch:{
    '$route':{
      handler(){
        console.info('路由发生了变化：');
        console.info(this.$router.currentRoute);
      }
    }
  },
	methods: {
		navClick (data,el) {
			var navElements = document.getElementsByClassName('nav-item');
			for (let index = 0; index < navElements.length; index++) {
				const item = navElements[index];
				if (!item.classList.contains("nav-item-action")) {
					item.classList.add("nav-item-action")
				}
			}
			el.currentTarget.parentNode.classList.remove("nav-item-action");
			this.$router.push({ path: data.routerPath });
		}
	}
}
</script>
<style scoped>
.nav {
	height: 100%;
	place-items: left;
	overflow-y: scroll;
}
.nav-item {
	width: inherit;
	height: 20%;
}
.nav-item-body {
	cursor: pointer;
	user-select: none;
	padding: 0 15px;
}
.nav-item-action {
	opacity: 0.5;
}
</style>